﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MainPage.aspx.cs" Inherits="SalePriceSystem.Page.MainPage"
    MasterPageFile="~/MasterPage/Site.Master" %>

<asp:Content ID="HeadContent" runat="server" ContentPlaceHolderID="HeadContent">
<link rel="stylesheet" href="/plugins/slick.grid.css" type="text/css"/>

<script src="/lib/jquery.event.drag-2.0.min.js"></script>

<script src="/plugins/slick.core.js"></script>
<script src="/plugins/slick.checkboxselectcolumn.js"></script>
<script src="/plugins/slick.autotooltips.js"></script>
<script src="/plugins/slick.cellrangedecorator.js"></script>
<script src="/plugins/slick.cellrangeselector.js"></script>
<script src="/plugins/slick.cellcopymanager.js"></script>
<script src="/plugins/slick.cellselectionmodel.js"></script>
<script src="/plugins/slick.rowselectionmodel.js"></script>
<script src="/plugins/slick.formatters.js"></script>
<script src="/plugins/slick.editors.js"></script>
<script src="/plugins/slick.grid.js"></script>
<script>
    var grid;
    var data = [];
    var columns = [
    { id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title" },
    { id: "duration", name: "Duration", field: "duration" },
    { id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar },
    { id: "start", name: "Start", field: "start", minWidth: 60 },
    { id: "finish", name: "Finish", field: "finish", minWidth: 60 },
    { id: "effort-driven", name: "Effort Driven", sortable: false, width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark }
  ];

    var options = {
        editable: false,
        enableAddRow: false,
        enableCellNavigation: true
    };

    $(function () {
        for (var i = 0; i < 500; i++) {
            var d = (data[i] = {});

            d["title"] = "Task " + i;
            d["duration"] = "5 days";
            d["percentComplete"] = Math.min(100, Math.round(Math.random() * 110));
            d["start"] = "01/01/2009";
            d["finish"] = "01/05/2009";
            d["effortDriven"] = (i % 5 == 0);
        }

        grid = new Slick.Grid("#myGrid", data, columns, options);
    })
</script>
</asp:Content>
<asp:Content ID="NorthPaneContent" runat="server" ContentPlaceHolderID="NorthPaneContent">
<div id="myGrid" style="width:100%;height:500px;"></div>
</asp:Content>
